<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Brant Liu">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>Gantt Component Demos</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.5.4/src/perfect-scrollbar.css">
    <link rel="stylesheet" href="assets/css/base.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div id="gantt"></div>

<div class="gantt-modal" style="display: none">
    <div class="gantt-modal-wrapper">
        <div class="gantt-modal-title">任务信息</div>
        <div class="gantt-modal-form">
            <form>
                <div class="form-group">
                    <label for="ganttName">任务描述</label>
                    <input type="text" class="form-control form-control-sm" name="name" placeholder="任务名称/描述" id="ganttName">
                </div>
                <div class="row">
                    <div class="col-9">
                        <div class="form-group">
                            <label for="ganttStartDate">计划时间</label>
                            <input type="text" class="form-control form-control-sm" name="startDate" placeholder="计划时间" id="ganttStartDate">
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label for="ganttDuration">天数</label>
                            <input type="number" class="form-control form-control-sm" name="duration" placeholder="计划天数" id="ganttDuration">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-9">
                        <div class="form-group">
                            <label for="ganttFinalStartDate">实际时间</label>
                            <input type="text" class="form-control form-control-sm" name="finalStartDate" placeholder="实际时间" id="ganttFinalStartDate">
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label for="ganttFinalDuration">天数</label>
                            <input type="number" class="form-control form-control-sm" name="finalDuration" placeholder="实际天数" id="ganttFinalDuration">
                        </div>
                    </div>
                </div>
                <div class="gantt-modal-footer">
                    <button type="button" class="btn btn-sm btn-primary">保 存</button>
                    <button type="button" class="btn btn-sm btn-secondary">取 消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jq.gantt-1.0.1.js"></script>
<script type="text/javascript">
    /**
     * 1年  = 4 个季度
     * 1年  = 12 月
     *
     * 日期
     * 年    year        2020
     * 季    quarter     q1, q2, q3, q4
     * 月    month       1,2,3,4,5,6.....
     * 周    yearWeekNo  第1周，第2周.....
     * 日    day         1,2,3.....
     * 星期  week        星期一，星期二，星期三，星期四，星期五..
     * */
    var config = {};
    config.resize = true;

    var now = new Date(2020, 3, 1);

    config.date = now;

    config.height = 400;
    config.gridWidth  = 0;
    config.maxDateNumber = 30;
    // config.maxDateNumber = 365;
    config.columns = [
        {field: 'text', text: '任务名称'},
        {field: 'startDate', text: '开始日期'},
        {field: 'endDate', text: '结束日期'},
        {field: 'duration', text: '天数'}
    ];

    config.format = 'yyyy-MM-dd';

    var data = [
        {id: 1, text: '基础施工', startDate: '2020-06-03', endDate: '2020-06-22', finalStartDate: '2020-06-12', finalEndDate: '2020-06-30'},
        {id: 2, text: '地坪施工', startDate: '2020-06-13'},
        {id: 3, text: '标准层施工', startDate: '2020-06-16', endDate: '2020-06-21', finalStartDate: '2020-06-19', finalEndDate: '2020-06-20'},
        {id: 4, text: '主体封顶', startDate: '2020-06-20', endDate: '2020-06-28'},
        {id: 5, text: '装修安装', startDate: '2020-06-22', endDate: '2020-06-27'},
        {id: 6, text: '竣工验收', startDate: '2020-06-27', endDate: '2020-06-27'},
        {id: 7, text: '项目投运', startDate: '2020-06-29', endDate: '2020-07-12'},
        // {id: 8, text: '基础施工', startDate: '2020-05-03', endDate: '2020-05-22', finalStartDate: '2020-05-12', finalEndDate: '2020-05-30'},
        // {id: 9, text: '地坪施工', startDate: '2020-05-13'},
        // {id: 10, text: '标准层施工', startDate: '2020-05-16', endDate: '2020-06-21', finalStartDate: '2020-06-19', finalEndDate: '2020-06-20'},
        // {id: 11, text: '主体封顶', startDate: '2020-05-20', endDate: '2020-05-28'},
        // {id: 12, text: '装修安装', startDate: '2020-05-22', endDate: '2020-05-27'},
        // {id: 13, text: '竣工验收', startDate: '2020-05-27', endDate: '2020-05-27'},
        // {id: 14, text: '项目投运', startDate: '2020-04-29', endDate: '2020-05-12'},
        // {id: 7, text: '项目投运', startDate: '2020-06-29', endDate: '2020-07-12'},
        // {id: 8, text: '基础施工', startDate: '2020-05-03', endDate: '2020-05-22', finalStartDate: '2020-05-12', finalEndDate: '2020-05-30'},
        // {id: 9, text: '地坪施工', startDate: '2020-05-13'},
        // {id: 10, text: '标准层施工', startDate: '2020-05-16', endDate: '2020-06-21', finalStartDate: '2020-06-19', finalEndDate: '2020-06-20'},
        // {id: 11, text: '主体封顶', startDate: '2020-05-20', endDate: '2020-05-28'},
        // {id: 12, text: '装修安装', startDate: '2020-05-22', endDate: '2020-05-27'},
        // {id: 13, text: '竣工验收', startDate: '2020-05-27', endDate: '2020-05-27'},
        // {id: 14, text: '项目投运', startDate: '2020-04-29', endDate: '2020-05-12'}
    ];

    config.data = data;
    config.add  = true;

    config.change = function(data, index){
        console.log(typeof data, data, index);
    };

    // var d = config.data = [];
    // for (var i = 0, len = 100; i < len; i++) {
    //     var dt = new Date(2023, 0, 1);
    //     dt.setDate(dt.getDate() + i + 1);
    //     var end = Gantt.datePlus(dt, 10);
    //     d.push({
    //         id: (i + 1),
    //         text: ('基础施工' + i),
    //         startDate: dt,
    //         endDate: end
    //     });
    // }

    config.scale = [
        {
            unit: 'quarter', format: function (date) {
                return Gantt.dateQuarter(date);
            }
        },
        {unit: 'month', format: 'MM月'},
        {unit: 'year', format: 'yyyy年'},
        {
            unit: 'weekNum', format: function (date) {
                return '第'+ Gantt.weekNo(date) +'周';
            }
        },
        {unit: 'day', format: 'dd'},
        'week'
    ];

    var gantt = Gantt.init('#gantt', config);

    console.log(gantt);
</script>
</body>
</html>